import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-change-child',
  templateUrl: './change-child.component.html',
  styles: [
    `
      .change-child {
        width: 600px;
        height: 350px;
        background-color: #c16a56;
      }
      .change-child h2 {
        color: #9cff61;
      }
    `
  ],

})
export class ChangeChildComponent implements OnInit, OnChanges {
  childName = 'VN';
  @Input() arms = '多兰剑';
  position = '下';
  @Output() childInit = new EventEmitter<void>();
  constructor(private cdr: ChangeDetectorRef) {
    this.cdr.detach();
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('在子组件中监听changes事件', changes);
    this.cdr.reattach();
    setTimeout(() => {
      // this.cdr.detach();
    }, 0);
  }

  ngOnInit(): void {
    this.childInit.emit();
    setTimeout(() => {
      this.childName = 'EZ';
    }, 3000);
  }

}
